<template>
  <view 
    class="list-item"
    :class="{'new-album-list': isNew}"
    @click="isNew ? $emit('create') : $emit('click', album)"
    @longpress="!isNew && $emit('longpress', album)"
  >
    <!-- 多选指示器 -->
    <view class="album-selection" v-if="isEditMode && !isNew">
      <view 
        class="selection-circle" 
        :class="{'selected': isSelected}"
        @click.stop="$emit('select', album)"
      >
        <uni-icons v-if="isSelected" type="checkmarkempty" size="14" color="#fff"></uni-icons>
      </view>
    </view>
    
    <!-- 封面或图标 -->
    <image v-if="!isNew" class="list-cover" :src="album.cover" mode="aspectFill"></image>
    <view v-else class="list-icon">
      <uni-icons type="plusempty" size="24" color="#3a8838"></uni-icons>
    </view>
    
    <!-- 相册信息 -->
    <view class="list-info">
      <text class="list-name">{{isNew ? '新建相册' : album.name}}</text>
      <text class="list-details" v-if="!isNew">{{album.photos.length}}张 · {{album.date}}</text>
      <text class="list-hint" v-if="!isNew && !isEditMode">长按可进入多选模式</text>
    </view>
    
    <!-- 右侧操作区 -->
    <view v-if="!isEditMode" @click.stop="!isNew && $emit('more', album)">
      <uni-icons v-if="!isNew" type="more-filled" size="18" color="#999"></uni-icons>
      <uni-icons v-else type="right" size="16" color="#ccc"></uni-icons>
    </view>
  </view>
</template>

<script>
export default {
  name: 'ListItem',
  props: {
    album: {
      type: Object,
      default: null
    },
    isNew: {
      type: Boolean,
      default: false
    },
    isEditMode: {
      type: Boolean,
      default: false
    },
    isSelected: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style scoped>
.list-item {
  display: flex;
  align-items: center;
  padding: 25rpx 30rpx;
  border-bottom: 1px solid #f0f0f0;
  position: relative;
}

.album-selection {
  margin-right: 15rpx;
}

.selection-circle {
  width: 40rpx;
  height: 40rpx;
  border-radius: 20rpx;
  border: 2px solid #3a8838;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.selection-circle.selected {
  background-color: #3a8838;
}

.list-cover {
  width: 100rpx;
  height: 100rpx;
  border-radius: 10rpx;
  margin-right: 20rpx;
}

.list-icon {
  width: 100rpx;
  height: 100rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f9f9f9;
  border-radius: 10rpx;
  border: 2rpx dashed #ccc;
  margin-right: 20rpx;
}

.list-info {
  flex: 1;
}

.list-name {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 5rpx;
  display: block;
}

.list-details {
  font-size: 24rpx;
  color: #999;
}

.list-hint {
  font-size: 22rpx;
  color: #3a8838;
  margin-top: 5rpx;
  display: block;
}
</style> 